<template>
  <div class="view">
    <ConditionFilter ref="Filter" @openFilter="openFilter" @confirm="search" />
    <u-divider></u-divider>

    <div class="action">
      <div class="group">
        <u-button class="btn" @click="" iconColor="#fff">
          <image src="@/static/icon/upload.png" />
          导出列表
        </u-button>
        <!-- <u-button class="btn" style="width:150rpx" @click="" iconColor="#fff">
          <image src="@/static/icon/calendar.png" />
          签到
        </u-button> -->
      </div>
      <u-divider></u-divider>
    </div>

    <scroll-view :scroll-top="scrolltTop" scroll-y="true" style="height: calc(100vh - 186rpx);" @scrolltolower="getMore">
      <div class="list" v-if="list.data.length>0">
        <div v-for="item in list.data">
          <div class="item">
            <XPicture class="avatar" defaultImgName="avatar" :url="item.head_img" />
            <div class="center">
              <div class="nickname">{{item.nickname}}</div>
              <div class="tags">
                <div class="t_item t_error" v-if="item.is_violate==2">
                  违规
                </div>
                <div class="t_item t_primary" v-else>
                  正常
                </div>
                <div class="t_item t_sussess" v-if="item.is_sign==1">
                  今日已签到
                </div>
                <div class="t_item t_gray" v-else>
                  未签到
                </div>
                <div class="t_item" v-if="item.status==1 && item.manage_name">
                  审核人- {{item.manage_name}}
                </div>
              </div>
              <div class="text">
                已签到<span class="times">{{item.sign_num}}</span>次 <span class="line">|</span> 最近签到时间：<span>{{item.last_sign_date}}</span>
              </div>
              <div class="reason" v-if="item.is_violate == 2">违规原因：{{item.reason}}</div>
            </div>
            <div class="detail" @click="showDetail(item)">详情>></div>
          </div>
          <u-divider></u-divider>
        </div>
        <u-loadmore v-if="list.data.length>4" :status="list.last_page>=list.page?'loading':'nomore'" />
      </div>
      <div v-else>
        <XNothing />
      </div>
    </scroll-view>
  </div>
  <detailDrawer ref="Popup" />
</template>

<script setup>
import { ref, reactive } from "vue"
import detailDrawer from './detailDrawer.vue'
import { onLoad } from '@dcloudio/uni-app'
import { request, catchException } from "@/util/request"
onLoad((opt) => {
  list.query.act_id = opt.id
  getList()
})

const Popup = ref()

function showDetail(item) {
  Popup.value.open(item)
}

const Filter = ref()
function openFilter() {
  Filter.value.open({
    top: 85,
    filterList: [{
      type: 'radio',
      label: '是否签到',
      param: 'is_sign',
      options: [{ label: '全部', value: "" }, { label: '是', value: 1 }, { label: '否', value: 2 }]
    }, {
      type: 'time',
      label: '签到时间',
      param1: 'start_time',
      param2: 'end_time'
    }]
  })
}


// 列表相关变量定义
const list = reactive({
  data: [],
  query: {},
  last_page: 10,
  page: 1,
  limit: 10,
  typeFilterList: []
})
// 搜索
function search(val) {
  list.page = 1
  list.query = val
  getList()
}
// 下一页
function getMore() {
  list.page += 1
  getList()
}
// 获取列表
function getList() {
  if (list.page > list.last_page) {
    return
  }
  request({
    url: 'adminMobile/activityApply/activityApplyUser',
    method: 'get',
    data: { page: list.page, limit: 10, ...list.query }
  }).then(res => {
    if (list.page == 1) {
      list.data = res.content.data
      list.last_page = res.content.last_page
    } else {
      list.data = list.data.concat(res.content.data)
    }
  }).catch(e => {
    if (list.page == 1 && !e.toString().includes('205')) {
      list.data = []
      return
    }
    catchException(e)
  })
}
function download() {
  if (programState.browser.wx) {
    navigate({
      url: '/pages/download/index', query: {
        type: 'person',
        id: list.query.act_id
      }
    })
  } else {
    const userToken_zh_web = uni.getStorageSync('userToken_zh_web')
    const url = baseUrl + `admin/activityApplyExport/activityApplyUser?act_id=${list.query.act_id}&token=${userToken_zh_web.token}`
    window.open(url)
  }
}

</script>

<style lang="scss" scoped>
.view {
  .u-divider {
    margin: 10rpx 0;
  }
  .action {
    margin-bottom: 10rpx;
    .u-divider {
      margin: 10rpx 0 20rpx 0;
    }
    .group {
      display: flex;
      margin-left: 30rpx;
      gap: 20rpx;
    }
    .btn {
      width: 210rpx;
      height: 64rpx;
      background: #468eff;
      border-radius: 16rpx;
      margin: unset !important;
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      text-align: center;
      color: #ffffff;
      image {
        width: 40rpx;
        height: 40rpx;
      }
    }
  }
  .list {
    .u-divider {
      margin: 20rpx 0;
    }
    .item {
      padding: 0 30rpx;
      display: flex;
      gap: 20rpx;
      position: relative;
      .center {
        display: flex;
        flex-direction: column;
        gap: 10rpx;
      }
      .avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
      }
      .text {
        font-size: 24rpx;
        font-weight: 400;
        color: #666666;
        .times {
          color: #009dff;
        }
        .line {
          position: relative;
          bottom: 5rpx;
          color: #dddddd;
          font-size: 16rpx;
        }
      }
      .reason {
        font-size: 24rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: left;
        color: #999999;
      }
      .detail {
        position: absolute;
        right: 30rpx;
        bottom: 0rpx;
        font-size: 24rpx;
        font-family: Source Han Sans CN, Source Han Sans CN-Regular;
        font-weight: 400;
        text-decoration: underline;
        text-align: right;
        color: #468eff;
      }
    }
    .tags {
      display: flex;
      gap: 16rpx;
    }
  }
}

.t_item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32rpx;
  background: rgba(70, 142, 255, 0.15);
  border-radius: 4rpx;
  font-size: 20rpx;
  color: #4da66d;
  padding: 0 10rpx;
}

.t_primary {
  background: rgba(70, 142, 255, 0.15);
  color: #468eff;
}
.t_success {
  background: rgba(77, 166, 109, 0.15);
  color: #4da66d;
}
.t_gray {
  background: rgba(153, 153, 153, 0.15);
  color: #999999;
}
.t_error {
  color: #df5146;
  background: rgba(223, 81, 70, 0.15);
}
</style>